<template>

        <el-container>
            <el-header>
                <div>
                <img src="../assets/heima.png" alt=""> 
                <span>后台管理系统</span>   
                </div>    
                <el-button @click="logout">退出</el-button>
                
            </el-header>
            <el-container>
                <el-aside :width="isCollapse ? '64px':'200px'">
                    <div class="toggle-btn" @click="toggleMenu">|||</div>
                    <el-menu
                    :default-active="activePath"
                    class="el-menu-vertical-demo"
                    background-color="#333744"
                    text-color="#fff"
                    :unique-opened="true"
                    :collapse-transition="false"
                    :collapse = "isCollapse"
                    :router="true"
                    active-text-color="#409eff">
                    <!-- 一级菜单 -->
                    <el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
                        <!-- 一级菜单模板 -->
                        <template slot="title">
                            <i :class="iconObj[item.id]"></i>
                            <span>{{item.authName}}</span>
                        </template>
                        <!-- 二级菜单 -->
                        <el-menu-item
                        @click="ActivePath(subItem.path)"
                         :index="'/'+subItem.path" v-for="subItem in item.children" :key="subItem.id">
                            <!-- 二级菜单模板 -->
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span>{{subItem.authName}}</span>
                            </template>
                        </el-menu-item>
                    </el-submenu>
                     </el-menu>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
      

</template>

<script>
export default {
    created(){
        this.getMenuList();
        this.activePath = window.sessionStorage.getItem("activePath");
    },
    data: function(){
        return {
            menuList:[],
            iconObj:{
                "125":"el-icon-user",
                "103":"el-icon-s-operation",
                "101":"el-icon-s-shop",
                "102":"el-icon-edit-outline",
                "145":"el-icon-s-data"
            },
            isCollapse:false,
            activePath:"",      
        }
    },
    methods: {
      logout(){
          window.sessionStorage.clear();
          this.$router.push("/login");
      },
      //获取菜单列表
      async getMenuList(){
         const{data:res} = await this.$http.get("menus")
         if(res.meta.status!==200)return this.$message.error(res.meta.msg);
         this.menuList = res.data;
      },
      toggleMenu(){
          this.isCollapse = !this.isCollapse;
      },
      ActivePath(path){
          this.activePath = '/'+path;
          window.sessionStorage.setItem("activePath",this.activePath);
      }
    }
}
</script>

<style lang="less" scoped>
.el-container{
    height: 100%;
}
   .el-header {
       background-color: #373d41;
       display: flex;
       justify-content: space-between;
       padding-left: 0;
       align-items: center;
       color: #fff;
       font-size: 20px;
       > div {
           display: flex;
           align-items: center;
           span {
               margin-left: 15px;
           }
       }
   } 
   .el-aside {
       background-color: #333744;
       .el-menu {
           border-right: 0;
       }
   }
   .el-main {
       background-color: #eaedf1;
   }
   .toggle-btn {
       background-color: #4a5064;
       height: 24px;
       line-height: 24px;
       font-size: 10px;
       color: #fff;
       text-align: center;
       letter-spacing: 0.2em;
       cursor: pointer;
   }
</style>